<template>
	<div class="detail-add-cart">
		<div class="detail-add-cart-main">
			<div class="detail-add-cart-header">
				<div class="detail-add-cart-header-image">
					<img :src="basicInfo.pic" alt="">
				</div>
				<div class="detail-add-cart-header-info">
					<div class="detail-add-cart-header-name">{{basicInfo.name}}</div>
					<div class="detail-add-cart-header-price">{{price | formatMoney}}</div>
				</div>
				<div class="close-add-cart" @click="layerHide"></div>
			</div>
			<div class="detail-add-cart-properties">
				<div
						class="detail-add-cart-properties-item"
						v-for="item in properties"
						:key="item.id"
				>
					<div class="detail-add-cart-properties-item-header" v-if="item.childsCurGoods.length">
						{{item.name}}
					</div>
					<div class="detail-add-cart-properties-item-content">
						<Radio
								v-for="value in item.childsCurGoods"
								:key="value.id"
								:name="item.id+''"
								:text="value.name"
								v-model="propertyChildIds[item.id]"
								:label="value.id"
								@change="changePropertyChildIds"
						/>
					</div>
				</div>
			</div>
			<div class="detail-add-cart-number">
				<div class="detail-add-cart-number-text">购买数量</div>
				<div class="detail-add-cart-number-input">
					<input-number v-model="count" :min="1"/>
				</div>
			</div>
		</div>
		<div class="detail-add-cart-btn">
			<button v-if="pattern===1" @click="addShopToCart">加入购物车</button>
			<button v-if="pattern===2" @click="purchaseShop">立即购买</button>
		</div>
	</div>
</template>

<script>
	import Goods from '@/services/goods';
	import deepClone from '@/utils/deepClone';
	import Radio from '#/Public/Radio';
	import inputNumber from '#/Public/inputNumber';
	import {mapActions} from 'vuex';

	const _goods = new Goods();
	export default {
		name: "addCart",
		data() {
			let propertyChildIds = {};
			for (let item of this.properties) {
				if (item.childsCurGoods.length) {
					propertyChildIds[item.id] = '';
				}
			}
			return {
				propertyChildIds,
				price: this.basicInfo.minPrice,
				count: 1,
				stores: this.basicInfo.stores,
				propertyChildIdsData: null
			}
		},
		props: {
			// 当pattern为1的时候显示加入购物车，为2的时候显示立即购买
			pattern: {
				type: Number,
				required: true
			},
			basicInfo: {
				type: Object,
				required: true
			},
			properties: {
				type: Array,
				required: true,
				default: []
			}
		},
		methods: {
			...mapActions(['addShopCart', 'addPurchase']),
			addShopToCart() {
				if (!this.validator()) {
					return false;
				}
				let goods = this.computedShopData();
				this.addShopCart(goods);
				this.layerHide();
				this.count = 1;
				this.$message({
					message: '加入购物车成功'
				});
				for (let i in this.propertyChildIds) {
					this.propertyChildIds[i] = '';
				}
			},
			purchaseShop() {
				if (!this.validator()) {
					return false;
				}
				let goods = this.computedShopData();
				this.layerHide();
				this.$message({
					type: 'loading',
					message: '商品准备中···'
				});
				this.addPurchase(goods);
				setTimeout(() => {
					this.$router.push('/purchase');
				}, 1500);
			},
			validator() {
				for (let i in this.propertyChildIds) {
					if (this.propertyChildIds[i] === '') {
						this.$alert({
							message: '请选择商品规格！'
						});
						return false;
					}
				}
				return true;
			},
			propertiesData() {
				let properties = this.properties.map(item => {
					let childsCurGood = item.childsCurGoods.find(value => {
						if (value.id === this.propertyChildIds[item.id]) {
							return value;
						}
					});
					let newItem = deepClone(item);
					newItem.childsCurGoods = childsCurGood;
					return newItem;
				});
				let propertyChildIdsStr = '';
				for (let i in this.propertyChildIds) {
					propertyChildIdsStr += i + ':' + this.propertyChildIds[i] + ','
				}
				return {
					properties,
					propertyChildIdsStr
				}
			},
			computedShopData() {
				let propertoes = this.propertiesData();
				let data = Object.assign({}, this.basicInfo, this.$data, propertoes, {checked: true});
				return data;
			},
			layerHide() {
				this.$emit('layerHide')
			},
			changePropertyChildIds() {
				let arr = [];
				for (let i in this.propertyChildIds) {
					if (this.propertyChildIds[i] === '') {
						return;
					}
					arr.push(this.propertyChildIds[i]);
				}
				let propertyChildIds = arr.join(',');
				const body = {
					goodsId: this.basicInfo.id,
					propertyChildIds
				};
				_goods.getGoodPrice(body).then(res => {
					this.price = res.data.price;
					this.stores = res.data.stores;
					this.propertyChildIdsData = res.data
				});
			}
		},
		components: {
			Radio,
			inputNumber
		}
	}
</script>
